<template>
  <a-modal
    v-model="visible"
    :title="titleMap[type]"
    destroyOnClose
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    centered
    @ok="submit"
    :afterClose="afterClose"
  >
    <a-form-model ref="form" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
      <a-form-model-item label="联系人姓名" prop="name">
        <a-input v-model="form.name" />
      </a-form-model-item>
      <a-form-model-item label="联系电话" prop="phone">
        <a-input v-model="form.phone" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { ContactAddOrUpdate } from '@/api/activity/activity'
export default {
  data() {
    return {
      visible: false,
      form: {
        id: undefined,
        name: undefined,
        phone: undefined,
      },
      rules: {
        name: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
      },
      confirmLoading: false,
      type: 'add',
      titleMap: {
        add: '新增',
        edit: '编辑',
      },
      rowData: {},
    }
  },
  methods: {
    openModel(data) {
      this.rowData = data.row
      this.type = data.type
      this.visible = true
      this.$nextTick(() => {
        Object.keys(this.form).forEach((k) => {
          this.form[k] = this.rowData[k]
        })
      })
    },
    closeModel() {
      this.visible = false
    },
    afterClose() {
      this.$refs.form.resetFields()
    },
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.confirmLoading = true
          try {
            let res = await ContactAddOrUpdate({ ...this.form })
            this.confirmLoading = false
            this.$message.success(`${this.titleMap[this.type]}成功`)
            this.closeModel()
            this.$emit('success', this.type === 'add' ? res.data.id : '')
          } catch (error) {
            this.confirmLoading = false
          }
        }
      })
    },
  },
}
</script>

<style></style>
